<!-- 
    姓名：吴俊锋
    学号：20230371174
    班级：计科专升本5班
    日期：2024年5月18日 11:27
    作业：动态导航菜单
    -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态导航菜单</title>
</head>
<style>
      ul li ul{
        display: none;
      }
</style>
<body>
   
    <ul class="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a>
            <ul>
                <li><a href="#">产品1</a></li>
                <li><a href="#">产品2</a></li>
                <li><a href="#">产品3</a></li>
            </ul>
        </li>
        <li><a href="#">服务</a>
            <ul>
                <li><a href="#">服务1</a></li>
                <li><a href="#">服务2</a></li>
                <li><a href="#">服务3</a></li>
            </ul>
        </li>
        <li><a href="#">关于</a></li>
    </ul>
    <script>
        var navItems = document.querySelectorAll('.nav li');//获取所有导航项
        for (var i = 0; i < navItems.length; i++) {//遍历所有导航项
            navItems[i].addEventListener('mouseover', function () { //鼠标移入时显示子菜单
                this.children[1].style.display = 'block';//鼠标移入时显示子菜单
            })
        }

        for (var i = 0; i < navItems.length; i++) {//遍历所有导航项
            navItems[i].addEventListener('mouseout', function () {//鼠标移出时隐藏子菜单
                this.children[1].style.display = 'none';//鼠标移出时隐藏子菜单
            })
        }
    </script>
    
</body>

</html>